import React, { PureComponent } from 'react';
import { Button } from 'antd';

import './index.less';
import { Tip } from '../../components';
import { loginService } from '../../service';
import { Catch, Luck } from "../../utils";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

export default class Login extends PureComponent{
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            loading:false
        }
    }
    render(){
        const { username, password, loading } = this.state;
        return(
            <div className="page-login">
                <div className="page-container">
                    <div id="wrapper" className="login-body">
                        <div className="login-content">
                            <div className="brand">
                                <img alt="logo" className="brand-img" src="" />
                                <h2 className="brand-text">GIA国际学校管理系统</h2>
                            </div>
                            <div id="login-form" className="login-form">
                                <div className="form-group">
                                    <input type="text" name="username" value={username} placeholder="请输入用户名" 
                                    onChange={this.handleChange.bind(this,'username')}
                                    onKeyPress={this.enterLogin}
                                    ref={(input)=>{this.inputUsername=input}}
                                    autoComplete="off"
                                    autoFocus
                                />
                                </div>
                                <div className="form-group">
                                    <input type="password" name="password" value={password} placeholder="请输入密码"
                                    onChange={this.handleChange.bind(this,'password')}
                                    onKeyPress={this.enterLogin}
                                    autoComplete="off"
                                    ref={(input)=>{this.inputPassword=input}}
                                />
                                </div>
                                <div className="form-group">
                                    <Button onClick={this.login} loading={loading}>
                                        登录
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    componentWillMount(){
        //判断登录
        const { history } = this.props;
        if(Luck.isLogin()){
            history.replace('/')
        }
    }

    handleChange=(name,e)=>{
        this.setState({
            [name]:e.target.value
        })
    }
    enterLogin = (e)=>{
        if(e.nativeEvent.keyCode === 13){
            this.login()
        }
    }

    login=async ()=>{
        const { username, password, loading } = this.state;
        const inputPassword=this.inputPassword,inputUsername=this.inputUsername;
        const { history } = this.props;

        if(username.trim().length === 0){
            Tip.Message("用户名不能为空",'error');
            inputUsername.focus();
            return false;
        }
        if(password.length === 0){
            Tip.Message("密码不能为空",'error');
            inputPassword.focus();
            return false;
        }
        this.setState({
            loading:!loading
        })

        try {
            let res = await loginService.login({username,password});
            this.setState({
                loading:false
            })
            if(res.code !== 0){
                Tip.Message(res.msg,'error');
                this.setState({
                    password:""
                });
                inputUsername.focus();
            }else{
                Tip.Message(res.msg+', 正在跳转...');
                NProgress.start();
                Catch.set('access_token',res['data']['access_token'],1/12);
                Catch.set('refresh_token',res['data']['refresh_token'],7);
                NProgress.done();
                Tip.Message('destroy');
                history.replace('/')
            }
        } catch (err) {
            Tip.Message(err.message,'error');
            this.setState({
                loading:false
            })
        }
        return;
    }
}